<script setup>
import { ref, watch } from 'vue'
import NoteItem from './components/NoteItem/index.vue'

const electron = require('electron')
const { ipcRenderer } = electron

const noteList = ref([])
// 搜索框内容
const searchContent = ref()

// 从本地储存中获取 noteList
noteList.value = window.storeApi.ipcRenderer.getStoreValue('noteWindowsParamsArr')

// 监听 noteWindow:change 事件
ipcRenderer.on('noteWindow:change', (e, newVal) => {
  if (searchContent.value !== '' && searchContent.value !== undefined) {
    ipcRenderer.send('searchContent:change:js', searchContent.value)
  } else {
    if (isJsonString(newVal)) {
      // 是 JSON 字符串，进行解析
      noteList.value = JSON.parse(newVal)
    } else if (typeof newVal === 'object' && newVal !== null) {
      // newVal 是对象，直接赋值
      noteList.value = newVal
    }
  }
})

// 判断 newVal 是否为 JSON 字符串
const isJsonString = (str) => {
  try {
    JSON.parse(str)
  } catch (e) {
    return false
  }
  return true
}

// 监听 colorTheme:change:vue 事件
ipcRenderer.on('colorTheme:change:vue', (e, noteId, colorName) => {
  // 找到对应的笔记属性
  const note = noteList.value.find((item) => item.id === parseInt(noteId))
  // 修改对应的笔记主题
  if (note) {
    note.theme = colorName
  }
  // 修改本地存储的笔记属性
  window.storeApi.ipcRenderer.setStoreValue('noteWindowsParamsArr', JSON.stringify(noteList.value))
})

// 双击事件打开笔记
const showNote = (noteId) => {
  ipcRenderer.send('noteWindow:show', noteId)
}

watch(
  () => searchContent.value,
  (newVal) => {
    ipcRenderer.send('searchContent:change:js', newVal)
  }
)

ipcRenderer.on('searchContent:change:vue', (e, matchArr) => {
  noteList.value = matchArr
})
</script>
<template>
  <n-scrollbar style="max-height: 100%">
    <div class="noteContainer">
      <div class="title">
        <span>随时计</span>
      </div>
      <div class="searchBox">
        <n-input v-model:value="searchContent" placeholder="搜索...">
          <template #suffix>
            <n-icon size="18" color="#989898">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 0 512 512"
              >
                <path
                  d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3zM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8a124.95 124.95 0 0 1-124.8-124.8z"
                  fill="currentColor"
                ></path>
              </svg>
            </n-icon>
          </template>
        </n-input>
      </div>
      <div class="noteList">
        <NoteItem
          v-for="note in noteList"
          :key="note.id"
          :note="note"
          :data-note-theme="note.theme"
          @dblclick="showNote(note.id)"
          @note:delete="noteDelete(noteId)"
        ></NoteItem>
      </div>
    </div>
  </n-scrollbar>
</template>

<style scoped lang="less">
.noteContainer {
  padding: 5px 10px 0 10px;
  height: 100%;
  .title {
    margin-bottom: 10px;
    user-select: none;

    span {
      color: var(--text-color);
      font-size: 20px;
      font-weight: 800;
    }
  }
  .searchBox {
    -webkit-app-region: no-drag;
    :deep(.n-input) {
      background-color: var(--search-background);
    }
    :deep(.n-input__input-el) {
      color: var(--text-color);
      caret-color: var(--text-color);
    }
    :deep(.n-input__border) {
      border: none;
    }
    :deep(.n-input__placeholder) {
      color: var(--search-placeholder-color);
    }
  }
  .noteList {
    margin-top: 15px;
    display: grid;
    justify-items: center;
    gap: 10px;
    transition: all 0.5s;
  }
}

/* 当视口宽度小于580px时，只有一列 */
@media only screen and (max-width: 580px) {
  .noteList {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 当视口宽度在581px到850px之间时，有两列 */
@media only screen and (min-width: 581px) and (max-width: 850px) {
  .noteList {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 当视口宽度在大于851时，有三列 */
@media only screen and (min-width: 851px) {
  .noteList {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
